<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        style="width: 200px;"
        class="filter-item"
        placeholder="资源名称"
        @keyup.enter.native="handleFilter"
      />
      <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="edit"
        @click="handleAdd"
      >添加
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading.body="listLoading"
      :data="list"
      border
      fit
      size="medium"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="name" align="center" label="按钮名称" />
      <el-table-column prop="code" align="center" label="编码" />
      <el-table-column prop="menuId" align="center" label="所属">
        <template slot-scope="scope">
          <span v-if="scope.row.parentId > 0">{{ treeMap[scope.row.parentId].title }}</span>
          <span v-else>/</span>
        </template>
      </el-table-column>
      <el-table-column prop="description" align="center" label="说明" />
      <el-table-column fixed="right" align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <sys-resource ref="sysResource" :scope="scope" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fetchList, delResource } from '@/api/resource'
import SysResource from './resource'

export default {
  name: 'Element',
  components: {
    SysResource
  },
  props: {
    scope: {
      type: Number,
      default: 0
    },
    menuId: {
      type: Number,
      default: -1
    },
    treeData: {
      type: Array,
      default() {
        return []
      }
    },
    treeMap: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: false,
      typeOptions: ['button', 'uri'],
      listQuery: {
        type: 1,
        pageNum: 1,
        pageSize: 10,
        name: undefined
      },
      dialogFormVisible: false,
      dialogStatus: '',
      tableKey: 0
    }
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  watch: {
    menuId() {
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const data = Object.assign({}, this.listQuery)
      data.parentId = this.menuId
      return fetchList(data, this.scope).then((res) => {
        this.listLoading = false
        if (res.code === 0) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleFilter() {
      this.fetchData()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.fetchData()
    },
    handleAdd() {
      this.$refs.sysResource.openAdd(this.menuId, this.treeData).then(() => {
        this.fetchData()
      })
    },
    handleEdit(resource) {
      this.$refs.sysResource.openEdit(resource.id, this.treeData).then(() => {
        this.fetchData()
      })
    },
    handleDelete(resource) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delResource(resource.id, this.scope).then((res) => {
          if (res.code === 0) {
            this.fetchData()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .filter-container {
    margin-top: 10px;
    margin-bottom: 20px;
	.el-button{
		background-color: $btnBgc;
		border: none;
	}
	.el-button:hover{
		opacity: 0.5;
	}
	::v-deep .el-input__inner:hover{
		  border-color: $btnBgc;
	}
	::v-deep .el-input__inner:focus{
		  border-color: $btnBgc;
	}
  }
</style>
